<template>
  <div style="margin-top: 0px;">
    <el-container>
      <el-header>
        <a>
          安全知识竞赛搜题
        </a>
      </el-header>

      <el-main>

        <el-autocomplete
          v-model="input"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入一段题目"
          @select="handleSelect"
          class="el-input"
        ></el-autocomplete>

<!--        <el-input v-model="input" placeholder="请输入一段题目"></el-input>-->

        <el-button type="primary" v-on:click="reloadpage" style="padding: 10px">搜题</el-button>

        <el-collapse-transition>
          <div v-show = "show">

            <el-card class="box-card transition-box">

              <div slot="header" class="clearfix">
                <span>单选</span>
              </div>

              <el-table
                :data="danxuanresult"
                border
                v-loading="danxuanloading"
                style="width: 100%">
                <el-table-column
                  prop="question"
                  label="问题"
                  width="400%"
                >
                </el-table-column>
                <el-table-column
                  prop="answer"
                  label="答案">
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.answer }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="a"
                  label="选项A">
                </el-table-column>
                <el-table-column
                  prop="b"
                  label="选项B">
                </el-table-column>
                <el-table-column
                  prop="c"
                  label="选项C">
                </el-table-column>
                <el-table-column
                  prop="d"
                  label="选项D">
                </el-table-column>
                <el-table-column
                  prop="e"
                  label="选项E">
                </el-table-column>
                <el-table-column
                  prop="f"
                  label="选项F">
                </el-table-column>
                <el-table-column
                  prop="g"
                  label="选项G">
                </el-table-column>
              </el-table>

            </el-card>

            <el-card class="box-card transition-box">
              <div slot="header" class="clearfix">
                <span>多选</span>
              </div>

              <el-table
                :data="duoxuanresult"
                border
                v-loading="duoxuanloading"
                style="width: 100%">
                <el-table-column
                  prop="question"
                  label="问题"
                  width="400%"
                >
                </el-table-column>
                <el-table-column
                  prop="answer"
                  label="答案">
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.answer }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="a"
                  label="选项A">
                </el-table-column>
                <el-table-column
                  prop="b"
                  label="选项B">
                </el-table-column>
                <el-table-column
                  prop="c"
                  label="选项C">
                </el-table-column>
                <el-table-column
                  prop="d"
                  label="选项D">
                </el-table-column>
                <el-table-column
                  prop="e"
                  label="选项E">
                </el-table-column>
                <el-table-column
                  prop="f"
                  label="选项F">
                </el-table-column>
                <el-table-column
                  prop="g"
                  label="选项G">
                </el-table-column>
              </el-table>

            </el-card>

            <el-card class="box-card transition-box">
              <div slot="header" class="clearfix">
                <span>判断</span>
              </div>

              <el-table
                :data="panduanresult"
                border
                v-loading="panduanloading"
                style="width: 100%">
                <el-table-column
                  prop="question"
                  label="问题"
                  width="400%"
                >
                </el-table-column>
                <el-table-column
                  prop="answer"
                  label="答案">
                  <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.answer }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

            </el-card>

          </div>
        </el-collapse-transition>

        <div>
          <el-tag>觉得好用的话推荐给同学朋友吧，感谢您的支持</el-tag>
        </div>

      </el-main>

    </el-container>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  data () {
    return {
      input:null,
      danxuanresult:[],
      duoxuanresult:[],
      panduanresult:[],
      url:'*********',
      danxuanloading:false,
      duoxuanloading:false,
      panduanloading:false,
      show:false,
      questions: [],
      state: ''
    }
  },
  mounted () {
    this.loadAll()
  },
  methods: {
    reloadpage: async function(){
      this.show = true
      this.danxuanresult = []
      this.duoxuanresult = []
      this.panduanresult = []
      this.danxuanloading = true
      this.duoxuanloading = true
      this.panduanloading = true
      await axios
        .get('http://'+this.url+':8080/question/api/danxuanresult?word='+this.input)
        .then(response => {
          this.danxuanresult = response.data
          this.danxuanloading = false
        })
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
      await axios
        .get('http://'+this.url+':8080/question/api/duoxuanresult?word='+this.input)
        .then(response => {
          this.duoxuanresult = response.data
          this.duoxuanloading = false
        })
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
      await axios
        .get('http://'+this.url+':8080/question/api/panduanresult?word='+this.input)
        .then(response => {
          this.panduanresult = response.data
          this.panduanloading = false
        })
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });

      this.danxuanloading = false
      this.duoxuanloading = false
      this.panduanloading = false

      if(this.danxuanresult.length === 0 && this.panduanresult.length === 0 && this.duoxuanresult.length === 0){
        this.$message({
          showClose: true,
          message: '请对照题目检查搜索内容，需要截取题目中的一段文字哦（可以将词用空格分开）',
          type: 'warning'
        });
      }else{
        this.$message({
          showClose: true,
          message: '搜素成功！（可以将词用空格分开提高准确度）',
          type: 'success'
        });
      }
    },
    loadAll(){
      axios
        .get('http://'+this.url+':8080/question/api/getAllQuestions')
        .then(response => {
          this.questions = response.data
        })
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
    },
    querySearchAsync(queryString, cb) {
      var questions = this.questions;
      var results = queryString ? questions.filter(this.createStateFilter(queryString)) : questions;
      cb(results);
    },
    createStateFilter(queryString) {
      return (input) => {
        return (input.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}

.el-header, .el-footer {
  background-color: #419fff;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 100%;
}

.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 50%;
  padding: 20px;
}

.box-card {
  width: auto;
  margin: 30px;
}
</style>
